/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {StyleSheet, Button, Text} from 'react-native';
import {videoImmersionList} from '../../components/videos';
import {
  SafeAreaView,
  useSafeAreaFrame,
} from '@react-native-oh-tpl/react-native-safe-area-context';
const VideoList = ({navigation}) => {
  const {width, height} = useSafeAreaFrame();

  return (
    <SafeAreaView style={styles.container}>
      {videoImmersionList.map(video => (
        <Button
          key={video.id}
          title={`视频宽/高${video.text}(${video.width}-${video.height})`}
          onPress={() => {
            navigation.navigate('VideoDetail', {id: video.id});
          }}
        />
      ))}
      <Text style={styles.text}>{`窗口宽vp：${width} 高vp：${height} 宽高比: ${(
        width / height
      ).toFixed(2)}`}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    rowGap: 10,
    flexDirection: 'column',
    justifyContent: 'flex-start',
  },
  text: {
    marginTop: 20,
    width: '100%',
    textAlign: 'center',
    fontSize: 20,
  },
});

export default VideoList;
